Premium Content

TS FUNDAMENTALS

Master TypeScript's core concepts and type system

Beginner

Module 1: TypeScript Fundamentals

TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript. It adds optional types, classes, and modules to JavaScript, helping you write more robust and maintainable code. Understanding TypeScript's type system is fundamental to leveraging its full power.

Try It Yourself:

TypeScript

// Basic Types
let username: string = "TypeScript Expert";
let userAge: number = 25;
let isActive: boolean = true;
let skills: string[] = ["JavaScript", "TypeScript", "React"];
let user: { name: string; age: number } = { name: "Alice", age: 30 };

// Function with type annotations
function greetUser(name: string, age: number): string {
    return `Hello, ${name}! You are ${age} years old.`;
}

// Interface definition
interface Person {
    name: string;
    age: number;
    email?: string; // Optional property
}

// Using the interface
const person: Person = {
    name: "Bob",
    age: 28,
    email: "bob@example.com"
};

// Union types
let id: string | number;
id = "ABC123";
id = 12345;

// Type aliases
type UserID = string | number;
let userId: UserID = "user-123";

console.log(greetUser(username, userAge));
console.log("User skills:", skills);
console.log("Person object:", person);
console.log("User ID:", userId);

Console Output

Key Points:

string, number, and boolean are TypeScript's basic types
Arrays can be typed using type[] or Array<type>
Interfaces define the structure of objects
Optional properties are marked with ?
Union types (|) allow variables to hold multiple types
Type aliases (type) create custom type names
Function parameters and return types can be explicitly typed
TypeScript catches type errors at compile time, not runtime

Premium Content

ADVANCED TYPES

Explore TypeScript's powerful type system features

Intermediate

Module 2: Advanced Type System

TypeScript's type system goes far beyond basic types. Advanced features like intersection types, conditional types, mapped types, and template literal types provide powerful tools for creating complex, type-safe applications. Mastering these concepts will elevate your TypeScript skills to expert level.

Try It Yourself:

TypeScript

// Intersection Types
interface Business {
    name: string;
    revenue: number;
}

interface Contact {
    email: string;
    phone: string;
}

type BusinessContact = Business & Contact;

const client: BusinessContact = {
    name: "Tech Corp",
    revenue: 1000000,
    email: "contact@techcorp.com",
    phone: "+1234567890"
};

// Conditional Types
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false

// Mapped Types
type Optional<T> = {
    [P in keyof T]?: T[P];
};

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

interface User {
    id: number;
    name: string;
    email: string;
}

type PartialUser = Optional<User>;
type ReadonlyUser = Readonly<User>;

// Template Literal Types
type EventName = "click" | "scroll" | "keypress";
type HandlerName = `on${Capitalize<EventName>}`;
// "onClick" | "onScroll" | "onKeypress"

// Type guards
function isString(value: any): value is string {
    return typeof value === "string";
}

function processValue(value: string | number) {
    if (isString(value)) {
        console.log("String length:", value.length);
    } else {
        console.log("Number squared:", value * value);
    }
}

console.log("Client:", client);
processValue("Hello");
processValue(5);

Console Output

Key Points:

Intersection types (&) combine multiple types into one
Conditional types use ternary operators for type logic
Mapped types transform existing types by modifying properties
Template literal types manipulate string literal types
Type guards (value is Type) help TypeScript narrow types
keyof operator gets keys of an object type
in operator iterates over keys in mapped types
Advanced types enable sophisticated type transformations

Premium Content

GENERICS

Create reusable and type-safe components with generics

Intermediate

Module 3: Generic Programming

Generics are TypeScript's way of creating reusable components that work with multiple types while maintaining type safety. They allow you to write flexible, type-safe functions, classes, and interfaces without sacrificing the benefits of static typing.

Try It Yourself:

TypeScript

// Basic Generic Function
function identity<T>(arg: T): T {
    return arg;
}

let output1 = identity<string>("Hello");
let output2 = identity<number>(42);

// Generic Interfaces
interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

let pair1: KeyValuePair<number, string> = { key: 1, value: "TypeScript" };
let pair2: KeyValuePair<string, boolean> = { key: "isAwesome", value: true };

// Generic Classes
class DataStorage<T> {
    private data: T[] = [];

    addItem(item: T) {
        this.data.push(item);
    }

    getItem(index: number): T {
        return this.data[index];
    }

    getAllItems(): T[] {
        return [...this.data];
    }
}

const stringStorage = new DataStorage<string>();
stringStorage.addItem("Hello");
stringStorage.addItem("World");

const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);

// Generic Constraints
interface HasLength {
    length: number;
}

function logLength<T extends HasLength>(arg: T): void {
    console.log(`Length: ${arg.length}`);
}

// Using multiple type parameters
function mergeObjects<T, U>(obj1: T, obj2: U): T & U {
    return { ...obj1, ...obj2 };
}

const obj1 = { name: "Alice" };
const obj2 = { age: 30 };
const merged = mergeObjects(obj1, obj2);

console.log("Identity:", output1, output2);
console.log("KeyValue pairs:", pair1, pair2);
console.log("String storage:", stringStorage.getAllItems());
console.log("Number storage:", numberStorage.getAllItems());
logLength("Hello");
logLength([1, 2, 3]);
console.log("Merged objects:", merged);

Console Output

Key Points:

Generics use type parameters (<T>) to create reusable code
Generic functions work with multiple types while maintaining type safety
Generic interfaces and classes create type-safe data structures
Constraints (extends) limit the types that can be used with generics
Multiple type parameters can be used for complex scenarios
Generic types are inferred when possible, reducing boilerplate
Default type parameters provide fallback types
Generics enable code reuse without sacrificing type safety

Premium Content

DECORATORS

Learn metaprogramming with TypeScript decorators

Advanced

Module 4: Decorators and Metaprogramming

Decorators are a powerful TypeScript feature that allows you to add metadata and modify the behavior of classes, methods, properties, and parameters. They enable advanced patterns like dependency injection, logging, validation, and more through a declarative approach.

Try It Yourself:

TypeScript

// Class Decorator
function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

// Method Decorator
function log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    
    descriptor.value = function(...args: any[]) {
        console.log(`Calling ${propertyName} with args:`, args);
        const result = originalMethod.apply(this, args);
        console.log(`Method ${propertyName} returned:`, result);
        return result;
    };
    
    return descriptor;
}

// Property Decorator
function format(formatString: string) {
    return function(target: any, propertyName: string) {
        let value: string;
        
        const getter = function() {
            return value;
        };
        
        const setter = function(newVal: string) {
            value = newVal.replace(/(\d{3})(\d{3})(\d{4})/, formatString);
        };
        
        Object.defineProperty(target, propertyName, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true
        });
    };
}

// Parameter Decorator
function validate(min: number, max: number) {
    return function(target: any, propertyName: string, parameterIndex: number) {
        const existingValidations: any[] = Reflect.getOwnMetadata("validations", target, propertyName) || [];
        existingValidations.push({ parameterIndex, min, max });
        Reflect.defineMetadata("validations", existingValidations, target, propertyName);
    };
}

// Using Decorators
@sealed
class User {
    @format("($1) $2-$3")
    phoneNumber: string;
    
    constructor(phoneNumber: string) {
        this.phoneNumber = phoneNumber;
    }
    
    @log
    greet(@validate(1, 100) times: number): string {
        return `Hello! `.repeat(times);
    }
}

const user = new User("1234567890");
console.log("Formatted phone:", user.phoneNumber);
console.log("Greeting:", user.greet(3));

// Accessing metadata
const validations = Reflect.getMetadata("validations", user, "greet");
console.log("Method validations:", validations);

Console Output

Key Points:

Decorators are functions that modify classes and their members
Class decorators receive the constructor function
Method decorators can modify or replace method implementations
Property decorators can transform property access
Parameter decorators can add metadata about parameters
Decorators execute when classes are defined, not when instantiated
Reflect Metadata API stores and retrieves decorator metadata
Decorator factories allow parameterized decorators
Decorators enable Aspect-Oriented Programming (AOP) patterns

Premium Content

UTILITY TYPES

Master TypeScript's built-in utility types

Advanced

Module 5: Utility Types Mastery

TypeScript provides a rich set of utility types that help transform existing types into new types. These utilities are essential for advanced type manipulation, enabling you to create precise, flexible type definitions without duplicating code.

Try It Yourself:

TypeScript

interface User {
    id: number;
    name: string;
    email: string;
    age: number;
    isActive: boolean;
}

// Partial - makes all properties optional
type PartialUser = Partial<User>;

// Required - makes all properties required
type RequiredUser = Required<PartialUser>;

// Readonly - makes all properties readonly
type ReadonlyUser = Readonly<User>;

// Pick - selects specific properties
type UserBasicInfo = Pick<User, "id" | "name" | "email">;

// Omit - removes specific properties
type UserWithoutId = Omit<User, "id">;

// Record - creates object type with specific key type and value type
type UserMap = Record<string, User>;

// Exclude - excludes types from union
type NonString = Exclude<string | number | boolean, string>;

// Extract - extracts types from union
type StringOnly = Extract<string | number | boolean, string>;

// NonNullable - removes null and undefined
type NoNulls = NonNullable<string | null | undefined>;

// Parameters - gets function parameters as tuple type
type FuncParams = Parameters<(name: string, age: number) => void>;

// ReturnType - gets function return type
type FuncReturn = ReturnType<() => User>;

// InstanceType - gets constructor instance type
class Animal {
    constructor(public name: string) {}
}
type AnimalInstance = InstanceType<typeof Animal>;

// Custom utility type example
type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

// Usage examples
const partialUser: PartialUser = { name: "Alice" };
const userBasic: UserBasicInfo = { id: 1, name: "Bob", email: "bob@example.com" };
const userMap: UserMap = {
    "user1": { id: 1, name: "Alice", email: "alice@example.com", age: 25, isActive: true }
};

console.log("Partial User:", partialUser);
console.log("User Basic Info:", userBasic);
console.log("User Map:", userMap);
console.log("Function Parameters type:", {} as FuncParams);
console.log("Function Return type:", {} as FuncReturn);

Console Output

Key Points:

Partial<T> makes all properties of T optional
Required<T> makes all properties of T required
Readonly<T> makes all properties of T readonly
Pick<T, K> selects specific properties from T
Omit<T, K> removes specific properties from T
Record<K, T> creates an object type with keys K and values T
Exclude<T, U> excludes types from T that are assignable to U
Extract<T, U> extracts types from T that are assignable to U
NonNullable<T> removes null and undefined from T
Utility types can be combined for complex type transformations

Premium Content

ADVANCED PATTERNS

Master advanced TypeScript patterns and techniques

Advanced

Module 6: Advanced TypeScript Patterns

Advanced TypeScript patterns leverage the full power of the type system to create robust, maintainable, and type-safe applications. These patterns include conditional type inference, recursive types, branded types, and advanced generic patterns that solve complex real-world problems.

Try It Yourself:

TypeScript

// Conditional Type Inference
type ArrayElement<T> = T extends (infer U)[] ? U : T;

type StringArrayElement = ArrayElement<string[]>; // string
type NumberElement = ArrayElement<number>; // number

// Recursive Types
type JsonValue = 
    | string 
    | number 
    | boolean 
    | null 
    | JsonValue[] 
    | { [key: string]: JsonValue };

const jsonData: JsonValue = {
    name: "Alice",
    age: 30,
    scores: [95, 87, 92],
    metadata: {
        active: true,
        tags: ["typescript", "expert"]
    }
};

// Branded Types for nominal typing
type Brand<K, T> = K & { __brand: T };
type UserId = Brand<number, "UserId">;
type ProductId = Brand<number, "ProductId">;

function createUserId(id: number): UserId {
    return id as UserId;
}

function createProductId(id: number): ProductId {
    return id as ProductId;
}

const userId = createUserId(123);
const productId = createProductId(456);

// This would cause a type error:
// const invalid: UserId = productId;

// Advanced Mapped Types with conditional logic
type PropertiesOfType<T, U> = {
    [K in keyof T]: T[K] extends U ? K : never;
}[keyof T];

interface Example {
    name: string;
    age: number;
    email: string;
    active: boolean;
}

type StringProperties = PropertiesOfType<Example, string>; // "name" | "email"

// Function overloads with conditional types
function processValue<T>(value: T): T extends string ? string[] : T extends number ? number[] : never;
function processValue(value: any): any {
    if (typeof value === "string") {
        return value.split("");
    }
    if (typeof value === "number") {
        return [value, value * 2, value * 3];
    }
    throw new Error("Unsupported type");
}

const stringResult = processValue("hello");
const numberResult = processValue(5);

console.log("JSON Data:", jsonData);
console.log("User ID:", userId);
console.log("Product ID:", productId);
console.log("String properties of Example:", {} as StringProperties);
console.log("String processing result:", stringResult);
console.log("Number processing result:", numberResult);

Console Output

Key Points:

Conditional types with infer can extract types from complex expressions
Recursive types enable self-referential type definitions
Branded types create nominal typing in TypeScript's structural type system
Advanced mapped types can filter properties based on their types
Function overloads with conditional types provide precise return type inference
Template literal types can manipulate string types at compile time
Variadic tuple types enable precise typing of function parameters
These patterns solve complex type problems in enterprise applications

PRACTICE PLAYGROUND

Experiment with advanced TypeScript concepts

Your TypeScript Playground: Try Advanced Patterns

Use this space to experiment with everything you've learned. Try implementing complex type transformations, creating utility types, or building type-safe APIs. This is your sandbox to practice and explore advanced TypeScript concepts.

TypeScript

// Advanced TypeScript Playground
// Try implementing complex type patterns here

// Example: Type-safe API builder
interface ApiEndpoints {
    users: { id: number; name: string };
    products: { id: number; title: string; price: number };
}

type ApiResponse<T extends keyof ApiEndpoints> = {
    data: ApiEndpoints[T];
    status: "success" | "error";
};

function createApi<T extends keyof ApiEndpoints>(endpoint: T): Promise<ApiResponse<T>> {
    // Simulated API call
    return Promise.resolve({
        data: {} as ApiEndpoints[T],
        status: "success"
    });
}

// Usage with full type safety
createApi("users").then(response => {
    console.log("User data:", response.data); // TypeScript knows this is { id: number; name: string }
});

createApi("products").then(response => {
    console.log("Product data:", response.data); // TypeScript knows this is { id: number; title: string; price: number }
});

// Advanced pattern: Type-safe event emitter
type EventMap = {
    login: { userId: number; username: string };
    logout: { userId: number };
    purchase: { userId: number; productId: number; amount: number };
};

class TypedEventEmitter<T extends Record<string, any>> {
    private listeners: { [K in keyof T]?: ((data: T[K]) => void)[] } = {};

    on<K extends keyof T>(event: K, listener: (data: T[K]) => void): void {
        if (!this.listeners[event]) {
            this.listeners[event] = [];
        }
        this.listeners[event]!.push(listener);
    }

    emit<K extends keyof T>(event: K, data: T[K]): void {
        this.listeners[event]?.forEach(listener => listener(data));
    }
}

const emitter = new TypedEventEmitter<EventMap>();
emitter.on("login", data => {
    console.log("User logged in:", data.username); // TypeScript knows data has username property
});

emitter.on("purchase", data => {
    console.log("Purchase made:", data.amount); // TypeScript knows data has amount property
});

// These would cause TypeScript errors:
// emitter.on("login", data => console.log(data.productId)); // Error: productId doesn't exist on login data
// emitter.emit("logout", { userId: 1, productId: 2 }); // Error: productId doesn't exist on logout data

console.log("TypeScript Playground Ready!");
console.log("Try implementing your own advanced patterns above!");

Console Output

Challenge Exercises:

Create a type-safe validation library with:
- Chainable validation methods
- Type inference for validated data
- Custom validation rules
Build a type-safe ORM with:
- Autocompletion for table names and columns
- Type-safe query results
- Relationship typing
Implement a type-safe state management system:
- Immutability enforcement
- Action type safety
- Middleware typing
Create a type-safe form library:
- Field validation with precise error types
- Form state management
- Dynamic form generation
Build a type-safe API client:
- Endpoint autocompletion
- Request/response type safety
- Error handling with typed errors

Advanced Concepts to Explore:

Conditional type inference with complex constraints
Recursive type definitions for nested data structures
Template literal types for dynamic string manipulation
Variadic tuple types for function parameter typing
Branded types for nominal typing in structural systems
Advanced mapped types with conditional logic
Type-level programming techniques

TS FUNDAMENTALS

Master TypeScript's core concepts and type system

Module 1: TypeScript Fundamentals

Try It Yourself:

Key Points:

ADVANCED TYPES

Explore TypeScript's powerful type system features

Module 2: Advanced Type System

Try It Yourself:

Key Points:

GENERICS

Create reusable and type-safe components with generics

Module 3: Generic Programming

Try It Yourself:

Key Points:

DECORATORS

Learn metaprogramming with TypeScript decorators

Module 4: Decorators and Metaprogramming

Try It Yourself:

Key Points:

UTILITY TYPES

Master TypeScript's built-in utility types

Module 5: Utility Types Mastery

Try It Yourself:

Key Points:

ADVANCED PATTERNS

Master advanced TypeScript patterns and techniques

Module 6: Advanced TypeScript Patterns

Try It Yourself:

Key Points:

PRACTICE PLAYGROUND

Experiment with advanced TypeScript concepts

Your TypeScript Playground: Try Advanced Patterns

Challenge Exercises:

Advanced Concepts to Explore:

Unlock Premium SkillMynte Content

Premium Courses

Certification

Mentorship

Monthly

Annual Best Value

Lifetime